<template>
	<el-cascader v-model="componentVal" :options="options" :key="propKey" :disabled="!activate" clearable :style="{ width: width }" @change="handleChange" />
</template>

<script lang="ts" setup>
// 级联选择
import Lxy_page_event_remote from '../custom/CustomCommon/lxy_page_event_remote.js';
import { treeData2Optioins } from '../custom/CustomCommon/tools.js';
import { TabFieldType, TablePageType } from '../custom/DataStructs/commontype';
import useElement from './hooks/useElement';

const props = withDefaults(
	defineProps<{
		pageInfo?: TablePageType;
		filterIdx: number;
		located: string;
		modelValue: string;
		FieldItem: TabFieldType | null;
		pageData?: Record<string, any>;
		inputData?: Record<string, any>;
	}>(),
	{ located: 'table', filterIdx: -1, pageData: () => ({}), inputData: () => ({}), modelValue: () =>(''), FieldItem: null }
);
const { FieldItem, pageData, located, inputData } = toRefs(props);

const emit = defineEmits(['update:modelValue', 'exportData']);
const activate = ref<boolean>(true);
const componentVal = ref([]);
const options = reactive<any[]>([]);
const tempVal = ref('');
const width = ref();
const propKey = ref(1);
// watch(
// 	() => componentVal.value,
// 	(newVal: string[]) => {
// 		if (newVal && newVal.length > 0) {
// 			tempVal.value = newVal[newVal.length -1];
// 		} else {
// 			tempVal.value = ''
// 		}
		
// 	},
// 	{
// 		immediate: true,
// 		deep:true
// 	}
// );
let tempCpnVal = ref([])
const init = async (item: any) => {
	// 没有指定事件的路径
	console.error('console.error: ', item)
	// if ((!item.pageType && !item.InputDefine?.event?.url) || (item.pageType && !item.dynamicOptions.url)) {
	// 	return console.error('[Error]Not define url for cascader select ctrl: ', item.FieldName);
	// }
	console.log('[Debug]Call remoteMethod for cascader, event: ', item.pageType ? item.dynamicOptions : item.InputDefine.event);
	// 开始调用远程方法
	const remoteEvent = new Lxy_page_event_remote(item.pageType ? item.dynamicOptions : item.InputDefine.event);
	remoteEvent.setDataSrc(props.pageData, props.inputData, null);
	const result = await remoteEvent.callEvent(null);
	
	if (!result || !result.data) {
		console.error('[Error]call remote method fail, itme: ', item.FieldName);
		// return this.$set(this.loadings, item.value, false)
	}
	treeData2Optioins(result.data.Child, options);
	console.log('cascader: ', options)
	console.log('located.value: ', located.value)
	if (['Edit', 'Detail', 'Filter'].includes(located.value)) {
		console.log("aaaaaaaa",{options:options, tempVal:tempVal.value,})
		tempCpnVal.value = []
		getCascaderDataArray(options, tempVal.value);
		
		componentVal.value = tempCpnVal.value
	}
	
};
let falg = false
watch(() => props.modelValue,
	(newVal: string) => {
		console.error('props modelValue: ', newVal)
		tempCpnVal.value = []
		if(newVal === ''){
			console.log(11111,[...componentVal.value])
			componentVal.value = []
			// componentVal.length = 0
		}else{
			if(!falg){
				console.log(2234434)
				tempVal.value = newVal
				init(FieldItem.value)
			}
			
		}
		
	},
	{
		immediate:true,
		deep:true
})
const handleChange = (val: string[]) => {
	falg = true
	tempCpnVal.value = []
	console.log('handleChange', val);
	componentVal.value = val
	if (val && val.length > 0) {
		
		emit('update:modelValue', val[val.length - 1]);
	} else {
		emit('update:modelValue', '');
	}
	
};
const setActivate = (params: any) => {
	activate.value = params.activate;
};

const getCascaderDataArray = (options: any[], value: string,) => {
	if (!options || options.length === 0) {
		return;
	}
	
	console.log('getCascaderDataArray', options, value, tempCpnVal.value);
	for (let i = 0; i < options.length; i++) {
		if (value && value.indexOf(options[i].value) === 0) {
			console.log('getCascaderDataArray', options[i].value);
			tempCpnVal.value.push(options[i].value);
			if (options[i].children && options[i].children.length > 0) {
				getCascaderDataArray(options[i].children, value);
			}
		}
	}
};

if(['Filter','Add'].includes(located.value)){
	init(FieldItem.value);
}
// 绑定值发生变化时更改

const { handleStyle, handleDisable } = useElement(located, FieldItem.value!, componentVal, props);
if (FieldItem.value?.pageType && FieldItem.value.pageType === 'page') {
	activate.value = !FieldItem.value.attrs.disabled;
	width.value = '100%';
} else {
	handleDisable(activate);
	width.value = handleStyle();
}
defineExpose({ setActivate, init });
</script>

<style lang="scss" scoped></style>
